<template>
  <div class="page" style="">
    <div class="print_title">印章资质使用申请详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyCode }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.handlerId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">

          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.handlerDeptId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <!-- 迭代4印章所属公司修改为印章资质所属公司 -->
            <p style="margin-bottom: 0; white-space: nowrap" >印章资质所属公司:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.sealCompany_dictText?formData.sealCompany_dictText:formData.sealCompany }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人所属团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyTeam_dictText?formData.applyTeam_dictText:formData.applyTeam }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >用印类型:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.signSealWay_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >选择印章:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ ids_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24" style="margin: 4px 0;" v-if="dataSource && dataSource.length">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass">
          <span slot="sealType" :title="text" slot-scope="text, record">{{ record.sealType_dictText?record.sealType_dictText: record.sealType }}</span>
        </a-table>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请公司:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyCompany_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <!-- <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请类别:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyType_dictText }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <a-col :span="12" v-if="formData.applyType == '1'">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >板块类别:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.plateType_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="!formData || !formData.plateType || (!!formData && !!formData.plateType && formData.plateType != '3')">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所属业务板块:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.businessSegment_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.plateType != 2">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >文件类别:</p>
            <!-- <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.fileType_dictText }}</p> -->
            <p v-if="formData.fileType == 1" style="margin:0 0 0 6px; word-break: break-all;">普通发文(非人事类)</p>
            <p v-if="formData.fileType == 2" style="margin:0 0 0 6px; word-break: break-all;">向政府部门、事业单位、社会团体发文或报送相关材料等</p>
            <p v-if="formData.fileType == 3" style="margin:0 0 0 6px; word-break: break-all;">投标报价类</p>
            <p v-if="formData.fileType == 4" style="margin:0 0 0 6px; word-break: break-all;">普通发文(人事类)</p>
            <p v-if="formData.fileType == 5" style="margin:0 0 0 6px; word-break: break-all;">采购付款类(不含项目分包)</p>
            <p v-if="formData.fileType == 6" style="margin:0 0 0 6px; word-break: break-all;">其他</p>
            <p v-if="formData.fileType == 7" style="margin:0 0 0 6px; word-break: break-all;">报告用印(环评资质类)</p>
            <p v-if="formData.fileType == 8" style="margin:0 0 0 6px; word-break: break-all;">项目部对外发文</p>
            <p v-if="formData.fileType == 9" style="margin:0 0 0 6px; word-break: break-all;">普通发文（项目部对外发文）</p>
            <p v-if="formData.fileType == 10" style="margin:0 0 0 6px; word-break: break-all;">报告出版类</p>
            <p v-if="formData.fileType == 11" style="margin:0 0 0 6px; word-break: break-all;">非项目合同</p>
            <p v-if="formData.fileType == 12" style="margin:0 0 0 6px; word-break: break-all;">对账函等其他财务类</p>
            <p v-if="formData.fileType == 13" style="margin:0 0 0 6px; word-break: break-all;">报告用印(水保资质类)</p>
            <p v-if="formData.fileType == 14" style="margin:0 0 0 6px; word-break: break-all;">社保公积金、收入证明等人事类</p>
            <p v-if="formData.fileType == 15" style="margin:0 0 0 6px; word-break: break-all;">营业执照变更、印章授权等行政类</p>
            <p v-if="formData.fileType == 16" style="margin:0 0 0 6px; word-break: break-all;">职能类工作简报</p>
            <p v-if="formData.fileType == 17" style="margin:0 0 0 6px; word-break: break-all;">项目专用章</p>
            <p v-if="formData.fileType == 18" style="margin:0 0 0 6px; word-break: break-all;">业务类工作简报</p>
            <p v-if="formData.fileType == 19" style="margin:0 0 0 6px; word-break: break-all;">三级公司、分公司合作协议</p>
            <p v-if="formData.fileType == 20" style="margin:0 0 0 6px; word-break: break-all;">CMA及报告专用章</p>
            <p v-if="formData.fileType == 21" style="margin:0 0 0 6px; word-break: break-all;">项目专用章</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.plateType == 2">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否投标报价类:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isTend_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.applyType == '2'">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >合同金额:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.contractAmount_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <!-- <a-col :span="12" v-if="formData.applyType == '2' && formData.fileType == '6'">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否关联项目:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.relateTask_dictText }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <!--迭代11 用印类型为印章资质类-经营类-投标报价类是，在文件类别后新增一个字段“关联预立项项目”-->
      <a-col :span="12" v-if="formData.applyType == '1' && formData.plateType == '2' && formData.fileType == '3'">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >关联项目:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.preProjectId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12" v-if="formData.applyType == '1' && formData.plateType == '2' && formData.fileType == '3'">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >文件所属经营团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.fileToManageTream_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.applyType == '2' && formData.fileType == '5'">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >费用所属团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.expenseToTream_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.applyType == '2' && formData.fileType == '6'">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >项目名称:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.projectName_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <!--升级版迭代3 新增文件类别选择工作简报可选择所属业务板块必填 -->
      <a-col :span="12" v-if="formData.fileType && formData.fileType == 18">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所属业务板块:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.businessSegment_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.plateType == 1 && formData.businessSegment == 'JYJCYWBKFZR' && formData.fileType == 20">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >项目类型:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.projectTypeNew_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否借出:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.lendYn_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >用印说明:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.userExplain }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >文件份数:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.quantity }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >归还状态:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.returnSeal_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="signFile" title="用印文件" v-if="signFile && signFile.length"></FileInfor>
    <FileInfor
      :purchaseFile="paymentCollectionProveFile"
      title="上传回款证明"
      v-if="formData.plateType == 1 && formData.businessSegment == 'JYJCYWBKFZR' && formData.fileType == 20 && paymentCollectionProveFile && paymentCollectionProveFile.length"
    ></FileInfor>
    <FileInfor :purchaseFile="purchaseFile" title="相关附件" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
  import { getAction } from '@/api/manage'
  import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
  export default {
    props: {
      formBpm: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: () => {},
        required: true
      },
      detail: {
        type: Boolean,
        default: false
      },
      formDataHistory: {
        type: Object,
        default: () => {},
        required: true
      }
    },
    components: {
      FileInfor,
      ProcessInfor
    },
    data() {
      return {
        dataSource: [], // 印章列表
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 45,
            align: 'center',
            customRender: function (t, r, index) {
                return parseInt(index) + 1;
            }
          },
          {
            title: '印章编号',
            align: 'center',
            // width: 65,
            dataIndex: 'sealQualificationId'
          },
          {
            title: '名称',
            align: 'center',
            // width: 65,
            dataIndex: 'name'
          },
          {
            title: '印章类别',
            align: 'center',
            width: 65,
            dataIndex: 'sealType',
            scopedSlots: { customRender: 'sealType' }
          },
          {
            title: '印章管理员',
            align: 'center',
            // width: 65,
            dataIndex: 'handlerId'
          },
          {
            title: '申请部门',
            align: 'center',
            // width: 65,
            dataIndex: 'handlerDeptId'
          }

        ],
        dataHistorySource: [], // 流程列表
        url: {
          historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
          queryByIds: '/api/erp/administration/seal/erpSealCertificationChangeRecord/queryByIds2', // 印章列表
          queryById: '/api/erp/administration/seal/erpSealAuthorizationInformation/queryById', // 獲取詳情
          teamQueryById: '/api/erp/omc/teammanager/erpOmcTeamManager/queryById',
          teamQueryByIds: '/api/erp/omc/teammanager/erpOmcTeamManager/queryByIds'
        },
        purchaseFile: [], // 附件
        signFile: [], // 附件
        paymentCollectionProveFile: [], // 附件
        ids_dictText: '' // 印章
      };
    },
    watch: {
      formData: {
        handler (val) {
            if (val) {
              if(val){
                this.getHistoryList()
              }
              // 获取详情
              // this.detail()
              this.initObj()
              this.initTeam(val.applyTeam)
              if (val.useFile) {
                this.purchaseFile = val.useFile.split(',')
              }
              if (val.signFile) {
                this.signFile = val.signFile.split(',')
              }
              if (val.paymentCollectionProveFile) {
                this.paymentCollectionProveFile = val.paymentCollectionProveFile.split(',')
              }
            }
        },
        immediate: true
      },
      formDataHistory: {
        handler (val) {
          if (val) {
              this.getHistoryList()
          }
        },
        immediate: true
      }
    },
    computed: {
      // 业务板块的显隐
			showBusinessSegment() {
				return !this.formData || !this.formData.plateType || (!!this.formData && !!this.formData.plateType && this.formData.plateType != '3')
			}
    },
    methods: {
      // 获取列表
      getHistoryList() {
        var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
        getAction(this.url.historyList, params).then(res => {
            if (res.success) {
                this.dataHistorySource = res.result.records || res.result
            }
        })
      },

      // 获取印章
      initObj() {
        this.ids_dictText = '';
        if (this.formData.ids && this.formData.ids.length > 0) {
          // ids = ids.split(',');
          let url = '';
          let param = {};
          url = this.url.queryByIds;
          param = { ids: this.formData.ids };
          getAction(url, param).then((res) => {
            if (res.success) {
              this.ids_dictText = '';
              this.dataSource = res.result // 印章列表
              if (res.result && res.result.length) {
                res.result.map((value, index) => {
                  this.ids_dictText = (value.sealType_dictText ? value.sealType_dictText : value.sealType) + ',' + this.ids_dictText
                })
                this.ids_dictText = this.ids_dictText.substring(0, this.ids_dictText.length - 1)
              } else {
                this.ids_dictText = '';
              }
            }
          });
        }
      },

      initTeam(ids) {
        if (ids && ids.length > 0) {
          var idArr = ids.split(',');
          let url = '';
          let param = {};
          if (idArr.length == 1) {
            url = this.url.teamQueryById;
            param = { id: ids };
          } else {
            url = this.url.teamQueryByIds;
            param = { ids: ids };
          }
          getAction(url, param).then((res) => {
            if (res.success) {
              if (!Array.isArray(res.result)) {
                this.$set(this.formData, 'applyTeam_dictText', res.result.tdnd + res.result.tdmc)
              } else {
                var name = ''
                res.result.map(value => {
                  name = value.tdnd + value.tdmc + ',' + name
                })
                name = name.substring(0, name.length - 1)
                this.$set(this.formData, 'applyTeam_dictText', name)
              }
              // this.$refs.inputModal.edit(res.result, this.ids);
              // this.disabledIds = false
            }
          });
        } else {
          this.$set(this.formData, 'applyTeam_dictText', '')
        }
      },

      tableRowClass(record, index) {
        if (index == 0) {
            return 'rowClass';
        }
        return ''
      }
    }
  };
</script>
<style lang="less" scoped>
  .page{
    background: #ffffff;
    padding: 19px 28px 0 28px;
    width: 750px;
    .print_title{
        font-size: 15px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
    }
    .title {
        background: #EEEEEE;
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        padding: 11px 9px;
    }
    .content {
        font-size: 13px;
    }

    .title_table{
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
  }
  /deep/ .rowClass{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead th{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead tr{
      background: #EEEEEE;
  }
  /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
      margin: 0 0px;
  }
  /deep/ .ant-table-body tr {
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
  .content {
    font-size: 13px;
  }
</style>
